<template>
  <div v-if="visible" class="pick-material-root">
    <div class="picking-for-mold-root scrollable">
      <div
        v-for="pickItem in state.pickingForList"
        :key="pickItem.pkMesPicking"
        class="picking-for-mold-item"
      >
        <div class="pick-material-code">
          <div style="flex: 1">{{ pickItem.invcode }}</div>
          <span class="wh">{{ pickItem.whName }}</span>
        </div>
        <div class="pick-material-name">
          {{ pickItem.invname }}
        </div>
        <div class="pick-material-spec">{{ pickItem.invspec }}</div>
        <div class="pick-material-data">
          <div class="pick-material-data-item br-aaa">
            <div class="pick-material-data-label">应该领用</div>
            <div class="pick-material-data-num" style="color: #409eff">
              {{ pickItem.pickingQty }}
            </div>
          </div>
          <div class="pick-material-data-item br-aaa">
            <div class="pick-material-data-label">已经领用</div>
            <div class="pick-material-data-num" style="color: #529b2e">
              {{ pickItem.pickedQty }}
            </div>
          </div>
          <div class="pick-material-data-item">
            <div class="pick-material-data-label">领用比例</div>
            <div
              class="pick-material-data-num"
              style="font-size: 12px; color: #4d3900"
            >
              {{ pickItem.childRatio }}/1
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="position: absolute; top: 155px; right: 0; left: 0; height: 28px"
    >
      <el-button-group>
        <el-button :icon="Upload" type="primary" @click="toPicking">
          上料
        </el-button>
        <el-button :icon="Aim" type="success" @click="toLailiaoReportInspect">
          报检
        </el-button>
        <el-button :icon="Download" type="danger" @click="toRemoveShangLiao">
          下料
        </el-button>
      </el-button-group>
    </div>
    <el-table
      :data="state.materialList"
      highlight-current-row
      style="
        position: absolute;
        top: 195px;
        right: 0;
        left: 0;
        height: calc(100vh - 155px - 100px - 28px - 10px);
        border-radius: 5px;
      "
      @current-change="handleCurrentChange"
    >
      <el-table-column label="上料单号" show-overflow-tooltip width="100px">
        <template #default="{ row }">
          <div style="font-size: 12px">
            {{ row.mesMaterialCode }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="材料" min-width="240" show-overflow-tooltip>
        <template #default="{ row }">
          <div style="font-size: 12px">
            <div>{{ row.invcode }}</div>
            {{ row.invname }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="条码" show-overflow-tooltip width="180px">
        <template #default="{ row }">
          <div style="font-size: 12px">
            {{ row.barcode }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="上料数量" show-overflow-tooltip width="120px">
        <template #default="{ row }">
          <div style="font-size: 16px; color: #0064e4">
            {{ row.qty }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="可用数量" show-overflow-tooltip width="120px">
        <template #default="{ row }">
          <div style="font-size: 16px; color: #0064e4">
            {{ row.kyQty }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="材料规格" show-overflow-tooltip width="100px">
        <template #default="{ row }">
          <div style="font-size: 12px">
            {{ row.invspec }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="pickVisible"
      style="
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
        background-color: #f0f1f2;
      "
    >
      <div style="width: 600px; margin-top: 10vh">
        <el-form :model="state.formData" @submit.prevent>
          <el-form-item label="">
            <el-input
              ref="scanInputRef"
              v-model="state.formData.barcode"
              @keyup.enter="toScan"
            >
              <template #prepend>
                <vab-icon
                  icon="qr-code-line"
                  style="font-size: 24px; color: #333"
                />
              </template>
              <template #suffix>
                <vab-icon
                  icon="search-2-line"
                  style="font-size: 24px; color: #333"
                  @click="toScan"
                />
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <template
        v-for="(barcodeItem, barcodeIndex) in state.barItemList"
        :key="'b' + barcodeIndex"
      >
        <el-card shadow="never" style="width: 480px">
          <template #header>
            <div style="display: flex">
              <div style="flex: 1; size: 18px; line-height: 24px; color: #333">
                <vab-icon icon="stack-line" style="margin-right: 12px" />
                <span style="font-weight: 700">{{ barcodeItem.invname }}</span>
              </div>
              <el-tag>{{ barcodeItem.typeName }}</el-tag>
            </div>
          </template>
          <div
            style="
              display: flex;
              padding: 0 0 3px 0;
              border-bottom: 1px solid #eee;
            "
          >
            <div
              style="
                display: flex;
                flex: 1;
                align-items: center;
                line-height: 18px;
              "
            >
              <div style="width: 80px; font-size: 12px; color: #666">
                材料编码
              </div>
              <div style="font-size: 14px; font-weight: 500; color: #333">
                {{ barcodeItem.invcode }}
              </div>
            </div>
            <div style="display: flex; flex: 1; line-height: 18px">
              <div style="width: 80px; font-size: 12px; color: #666">
                批次号
              </div>
              <div style="font-size: 14px; font-weight: 500; color: #333">
                {{ barcodeItem.invbatch }}
              </div>
            </div>
          </div>
          <div style="display: flex; padding: 3px 0 0 0">
            <!-- border-bottom: 1px solid #eee; -->
            <div
              style="
                display: flex;
                flex: 1;
                align-items: center;
                line-height: 18px;
              "
            >
              <div style="width: 80px; font-size: 12px; color: #666">仓库</div>
              <div style="font-size: 14px; font-weight: 500; color: #333">
                {{ barcodeItem.whName }}
              </div>
            </div>
            <div
              style="
                display: flex;
                flex: 1;
                align-items: center;
                line-height: 18px;
              "
            >
              <div style="width: 80px; font-size: 12px; color: #666">数量</div>
              <div style="font-size: 14px; font-weight: 500; color: #333">
                <!-- {{ barcodeItem.mesQty }} -->
                <el-input-number
                  v-model="barcodeItem.bcQty"
                  :controls="false"
                  :max="barcodeItem.mesQty"
                  :min="0"
                />
              </div>
            </div>
          </div>
        </el-card>
      </template>
      <el-button type="primary" @click="toUpdateMaterial">保存</el-button>
      <el-icon
        style="
          position: absolute;
          top: 12px;
          right: 12px;
          z-index: 990;
          font-size: 24px;
          color: #333;
        "
        @click="toClosePick"
      >
        <Close />
      </el-icon>
    </div>
    <materialInspectionDialog
      ref="materialInspectionDialogRef"
      @do-refresh-data="doRefreshData"
    />
  </div>
</template>
<script setup>
  import materialInspectionDialog from '../dialog/materialInspectionDialog.vue'
  import { Close, Upload, Download, Aim } from '@element-plus/icons-vue'
  import {
    getPickingForMoldApi,
    getMaterialHMoldApi,
    getMaterialHApi,
    getMesPickingApi,
    shangliaoScanBarcodeApi,
    shangLiaoApi,
    removeShangLiaoApi,
  } from '@/api/mes/material_api.ts'
  // import { lailiaoReportInspectApi } from '@/api/qm/index.ts'
  import { clone } from 'lodash'
  // import { localStorageConfig } from '@/config/localstorage.config'
  // const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const visible = ref(false),
    pickVisible = ref(false),
    $baseMessage = inject('$baseMessage'),
    $baseLoading = inject('$baseLoading'),
    $baseConfirm = inject('$baseConfirm')
  const scanInputRef = ref(),
    materialInspectionDialogRef = ref()
  const state = reactive({
    formData: {
      barcode: '',
    },
    dispatchData: null,
    pickingForList: [], // 应领
    materialList: [], // 已领
    barItemList: [],
    currentRow: null,
  })

  const doRefreshData = () => {
    toLoadRecord()
  }

  const toLailiaoReportInspect = () => {
    if (state.currentRow) {
      materialInspectionDialogRef.value.handleOpen(state.currentRow)
    } else {
      $baseMessage('请先选择上料单')
    }
  }

  const doRemoveShangLiao = async () => {
    const load = $baseLoading(),
      params = {
        pkMesMaterialH: state.currentRow.pkMesMaterialH,
        pkMesPicking: state.currentRow.pkMesPicking,
      }
    try {
      const res = await removeShangLiaoApi(params)
      $baseMessage(res.msg || '操作成功!', 'success')
      toLoadRecord()
      load.close()
      toClosePick()
    } catch (error) {
      load.close()
    }
  }

  // removeShangLiaoApi
  const toRemoveShangLiao = async () => {
    if (state.currentRow) {
      $baseConfirm(
        '是否删除',
        null,
        () => {
          doRemoveShangLiao()
        },
        () => {},
        '确认',
        '取消'
      )
    } else {
      $baseMessage('请先选择上料单')
    }
  }

  const handleCurrentChange = (val) => {
    state.currentRow = val
  }

  const toUpdateMaterial = async () => {
    const load = $baseLoading()
    try {
      const res = await shangLiaoApi(state.barItemList)
      $baseMessage(res.msg || '操作成功!', 'success')
      toLoadRecord()
      load.close()
      toClosePick()
    } catch (error) {
      load.close()
    }
  }

  const toPicking = () => {
    pickVisible.value = true
    state.barItemList = []
    state.formData.barcode = ''
    nextTick(() => {
      scanInputRef.value.focus()
    })
  }

  const toClosePick = () => {
    pickVisible.value = false
    state.barItemList = []
    state.formData.barcode = ''
  }

  const toScan = async () => {
    const pickList = clone(state.pickingForList) || []
    // console.log('toScan', state.formData.barcode)
    if (pickList && pickList.length > 0) {
      pickList[0]['barcode'] = state.formData.barcode
    }
    const { data } = await shangliaoScanBarcodeApi(pickList)
    state.barItemList.push({ ...data, bcQty: data.mesQty })
  }

  // barcode

  const queryPicking = async () => {
    const { data } = await getMesPickingApi({
      pkDispatch: state.dispatchData.pkDispatch,
    })
    state.pickingForList = data
  }

  const queryMaterial = async () => {
    const { data } = await getMaterialHApi({
      pkDispatch: state.dispatchData.pkDispatch,
    })
    state.materialList = data
  }

  const queryPickingForMold = async () => {
    const { data } = await getPickingForMoldApi({
      pkMid: state.dispatchData.pkDispatchMid,
    })
    state.pickingForList = data
  }

  const queryMaterialHMold = async () => {
    const { data } = await getMaterialHMoldApi({
      pkDispatchMid: state.dispatchData.pkDispatchMid,
    })
    state.materialList = data
  }

  const toShow = (dispatchData) => {
    visible.value = true
    state.dispatchData = dispatchData
    toLoadRecord()
  }

  const toLoadRecord = () => {
    if (state.dispatchData.useMold) {
      queryPickingForMold()
      queryMaterialHMold()
    } else {
      queryPicking()
      queryMaterial()
    }
  }

  const toHide = () => {
    visible.value = false
    state.dispatchData = null
  }
  defineExpose({
    toShow,
    toHide,
  })
</script>
<style lang="scss" scoped>
  .pick-material-root {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    :deep(.el-table .cell) {
      padding: 0 3px;
    }
    :deep(.el-input__wrapper) {
      background: none;
      border-bottom: 1px solid #e0e0e0;
      box-shadow: none;
    }
    :deep(.el-input-group__prepend) {
      background: none;
      border-bottom: 1px solid #e0e0e0;
      box-shadow: none;
    }
    :deep(.el-card__header) {
      padding: 6px 12px;
    }

    :deep(.el-input__inner) {
      height: 20px;
      text-align: left;
    }
    :deep(.el-input-number.is-without-controls .el-input__wrapper) {
      padding: 0;
    }
    .picking-for-mold-root {
      position: absolute;
      top: 0;
      right: 0px;
      left: 0px;
      display: flex;
      height: 144px;
      padding: 3px;
      overflow-x: scroll;
      overflow-y: hidden;
      background-color: #f0f1f2;
      border-radius: 5px;
      .picking-for-mold-item {
        flex-shrink: 0;
        width: 280px;
        height: 100%;
        margin-right: 6px;
        background-color: #e0e1e2;
        border-radius: 5px;
        .pick-material-code {
          display: flex;
          height: 20px;
          padding: 0 6px;
          font-size: 16px;
          font-weight: 700;
          line-height: 20px;
          color: #ffffff;
          background: linear-gradient(45deg, #4793ff, #0064e4);
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          .wh {
            font-size: 12px;
            font-weight: 500;
          }
        }
        .pick-material-name {
          height: 40px;
          padding: 0 6px;
          overflow: hidden;
          font-size: 16px;
          font-weight: 700;
          line-height: 20px;
          color: #333;
        }
        .pick-material-spec {
          height: 20px;
          padding: 0 6px;
          font-size: 12px;
          font-weight: 600;
          line-height: 20px;
          color: #777;
        }
        .pick-material-data {
          display: flex;
          height: 50px;
          font-size: 12px;
          font-weight: 500;
          line-height: 18px;
          color: #555;
          text-align: center;
          border: 1px solid #aaa;
          border-radius: 3px;
          .pick-material-data-item {
            flex: 1;
          }
          .br-aaa {
            border-right: 1px solid #aaa;
          }
          .pick-material-data-label {
            line-height: 20px;
          }
          .pick-material-data-num {
            font-size: 16px;
            font-weight: 700;
            line-height: 25px;
          }
        }
      }
    }
    .scrollable::-webkit-scrollbar {
      display: none;
    }
    .pick-btn {
      position: absolute;
      right: 50%;
      bottom: 12px;
      z-index: 9999;
      margin-left: 24px;
      font-size: 48px;
      font-weight: bold;
      color: #0064e4;
    }
  }
</style>
